<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div style="text-align: center;margin-bottom: 30px">
          防火区域{{createStatus?'新增':'更新'}}
        </div>
        <el-form :model="regionForm" ref="regionForm" :rules="regionFormRules" label-width="100px">


          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="所属建筑" prop="buildId">
              <el-select v-model="regionForm.buildId" placeholder="请选择所属建筑" style="width: 100%">
                <el-option v-for="(item,index) in buildingList" :key="index"  :value="item.ucId" :label="item.name" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="楼层" prop="floor">
              <el-input type="number" v-model="regionForm.floor" placeholder="请输入楼层" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="防火区域描述" prop="remark">
              <el-input type="text" v-model="regionForm.remark" placeholder="请输入防火区域描述" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="区域面积" prop="area">
              <el-input type="text" v-model="regionForm.area" placeholder="请输入区域面积" clearable>
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="详细位置" prop="address">
              <el-input type="text" v-model="regionForm.address" placeholder="请输入设备详细位置" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <div style="text-align: center" class="dialog-footer">
          <el-button @click="cancelRegion">取 消</el-button>
          <el-button :loading="addLoading" v-if="createStatus" type="primary" @click="createRegion">创 建</el-button>
          <el-button :loading="addLoading" v-else type="primary" @click="updateRegion">修 改</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getBuildingList} from "@/api/building";
import {
  getInFireproofRegionVo,
  updateInFireproofRegion,
  addInFireproofRegion
} from "@/api/fireproofRegion";

export default {
  name: "edit",
  data(){
    return{
      regionForm:{},
      regionFormRules:{},
      buildingList:[],
      addLoading:false,
    }
  },
  computed:{
    createStatus(){
      return this.$route.params.ucId=='0'
    }
  },
  created() {
    if (!this.createStatus){
      let ucId= this.$route.params.ucId
      this.getRegionVo(ucId)
    }
    this.getBuildingList()
  },

  methods: {
    getBuildingList(){
      getBuildingList({deleted:false}).then(res=>{
        this.buildingList = res.data

      }).catch(error=>{
        alert("获取建筑列表失败")
      })
    },
    getRegionVo(val){
      getInFireproofRegionVo({ucId:val}).then(res=>{
        this.regionForm = res.data
        this.regionForm.area=this.regionForm.area/10000
      }).catch(error=>{

      })
    },
    cancelRegion(){
      window.history.back()
    },
    createRegion(){
      this.addLoading = true
      this.$refs['regionForm'].validate(valid => {
        if (valid){
          let obj =Object.assign({},this.regionForm)
          obj.area=obj.area*10000
          addInFireproofRegion(obj).then(res=>{
            this.addLoading = false
            this.$notify.success({
              title: '成功',
              message: "添加防火区域成功"
            })
            this.cancelRegion()
          }).catch(res=>{
            this.addLoading = false
            this.$notify.error({
              title: '失败',
              message: res.msg
            })
          })
        }else {
          this.addLoading = false
          console.log("表单验证不通过")
        }
      })
    },
    updateRegion(){
      this.addLoading = true
      this.$refs['regionForm'].validate(valid => {
        if (valid){
          let obj =Object.assign({},this.regionForm)
          obj.area=obj.area*10000
          updateInFireproofRegion(obj).then(res=>{
            this.addLoading = false
            this.$notify.success({
              title: '成功',
              message: "更新防火区域成功"
            })
            this.cancelRegion()
          }).catch(res=>{
            this.addLoading = false
            this.$notify.error({
              title: '失败',
              message: res.msg
            })
          })
        }else {
          this.addLoading = false
          console.log("表单验证不通过")
        }
      })
    },


  }
}
</script>

<style scoped>

</style>